<template>
  <div>
    <!-- v-for 用于列表渲染 -->
    <!-- <h2 v-for="(item,index) in list" :key="index">{{ item }}</h2> -->
    <ul>
      <li v-for="item in people" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- item 数组的每一项 index 每一项的下标    :key="index"  这里写的严格来说是错误的 只是为了让编译器不报错 并没有起到key 应有的作用 -->
    <!-- key 的作用 是Dom 元素的唯一标识 当数组发生增减操作时 默认情况下需要删除所有节点 然后全部重新渲染。但是有了key在重绘之前 会判断 新绘制的元素 与已有元素是否有相同的key 如果是 则直接复用即可 ，
    不是的话 在重新绘制Dom节点 
    所以key存在的意义就是提高Dom的更新效率-->
    <!-- <h2 v-for="(item, index) of people" :key="index">{{ item.name }}</h2> -->
    <p v-for="(value, key, index) in obj" :key="index">
      {{ value }}---{{ key }}---{{ index }}
    </p>
    <div v-for="item in test" :key="item.id">
      <p>{{ item.name }}</p>
      <ul>
        <li v-for="(only, index) in item.skill" :key="index">{{ only }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        one: 100,
        two: 200,
        three: 300,
      },
      val: null,
      list: ["123", "123123", "456456", "456"],
      people: [
        {
          id: "001",
          name: "zhangsna",
          age: 22,
        },
        {
          id: "002",
          name: "sdsdd",
          age: 22,
        },
        {
          id: "003",
          name: "zhasdsdngsna",
          age: 22,
        },
        {
          id: "004",
          name: "zhansdsgsna",
          age: 22,
        },
      ],
      test: [
        {
          id: "001",
          name: "zhangsna",
          age: 22,
          skill: ["瞬移"],
        },
        {
          id: "002",
          name: "sdsdd",
          age: 22,
          skill: ["滑翔"],
        },
        {
          id: "003",
          name: "zhasdsdngsna",
          age: 22,
          skill: ["短暂无敌"],
        },
        {
          id: "004",
          name: "zhansdsgsna",
          age: 22,
          skill: ["时停"],
        },
      ],
    };
  },
};
</script>

<style>
</style>